<template>
  <div>
    <RadioGroup
      @on-change="radioChange"
      style="margin-right: 10px"
      v-model="currentDateType"
      type="button"
    >
      <Radio v-for="(item, index) in dataType" :key="index" :label="item.key">
        <span>{{item.value}}</span>
      </Radio>
    </RadioGroup>
    <!-- <DatePicker :type="currentDateType"
                placeholder="请选择时间"
                placement="bottom"
                :editable="false"
                @on-change="change"
                :options="dateOption"
                :clearable='clearable'
                v-model="binddingDate"
                class="data-time-style"
    style="width:180px;"></DatePicker>-->
    <DatePicker
      v-for="(item, index) in dataType"
      :key="index"
      v-show="item.key == selectDateType"
      :type="item.key"
      placeholder="请选择时间"
      placement="bottom"
      :editable="false"
      @on-change="change"
      v-model="initValue[item.key]"
      :options="dateOption"
      :clearable="clearable"
      class="data-time-style"
      style="width:220px;"
    ></DatePicker>
  </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  name: 'datePickerYmd',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: {
      type: Array,
      default: () => [new Date(), new Date()]
    },
    selectDateType: {
      // 默认选中
      type: String,
      default: 'daterange',
      required: true
    },
    clearable: {
      type: Boolean,
      default: false
    },
    dataType: {
      type: Array,
      default: () => [{ key: 'daterange', value: '日' }, { key: 'month', value: '月' }, { key: 'year', value: '年' }]
    },
    dateOption: {
      type: Object,
      default: () => {
        return {
          disabledDate: date => {
            return dayjs(date).isAfter(dayjs(new Date()).subtract(1, 'day'))
            // if (process.env.NODE_BUILD === 'prod') return dayjs(date).isAfter(dayjs(new Date()).subtract(1, 'day'))
            // return dayjs(date).isAfter(dayjs(new Date()))
          }
        }
      }
    }
  },
  data () {
    return {
      currentValue: this.value,
      currentDateType: this.selectDateType,
      initValue: {
        daterange: [this.value[0], this.value[1]],
        date: this.value[0],
        month: this.value[0],
        year: this.value[0]
      }
      // dateOption: {
      //   disabledDate (date) {
      //     if (process.env.NODE_BUILD === 'prod') return dayjs(date).isAfter(dayjs(new Date()).subtract(1, 'day'))
      //     return dayjs(date).isAfter(dayjs(new Date()))
      //   }
      // }
    }
  },
  computed: {
    binddingDate: {
      get () {
        return this.initValue[this.currentDateType]
      },
      set (value) {
        return (this.initValue[this.currentDateType] = value)
      }
    }
  },
  watch: {
    binddingDate: {
      handler: function (val) {
        this.setVlaue()
      },
      deep: true
    },

    // 选中的按钮
    currentDateType (val) {
      // console.log(val, '按钮')
      this.currentDateType = val
      this.$emit('update:selectDateType', val)
      this.setVlaue()
    },
    // 传进来的按钮
    selectDateType (val) {
      this.currentDateType = val
    }
  },
  methods: {
    setVlaue (change) {
      // console.log(this.dateOption)
      // debugger
      let value = this.initValue[this.currentDateType]
      let startDate, endDate
      // let dateArr
      if (this.currentDateType === 'daterange') {
        startDate = dayjs(value[0]).format('YYYY-MM-DD 00:00:00')
        endDate = dayjs(value[1]).format('YYYY-MM-DD 00:00:00')
        // dateArr = [,
        //  ]
      } else if (this.currentDateType === 'month') {
        startDate = dayjs(value).format('YYYY-MM-01 00:00:00')

        endDate = dayjs(value)
          .add(1, 'month')
          .format('YYYY-MM-01 00:00:00')
        if (dayjs().isBefore(endDate)) {
          endDate = dayjs().format('YYYY-MM-DD 00:00:00')
          // 判断是否需要加时间
          if (!this.dateOption.disabledDate(new Date(endDate))) {
            endDate = dayjs(endDate)
              .add(1, 'day')
              .format('YYYY-MM-DD 00:00:00')
          }
        }

        // endDate = dayjs().isAfter(dayjs(value).add(1, 'month'))
        // dateArr = [
        //   dayjs(value).format('YYYY-MM-01 00:00:00'),
        //   dayjs(value)
        //     .add(1, 'month')
        //     .format('YYYY-MM-01 00:00:00')
        // ]
      } else if (this.currentDateType === 'year') {
        startDate = dayjs(value).format('YYYY-01-01 00:00:00')

        endDate = dayjs(value)
          .add(1, 'year')
          .format('YYYY-01-01 00:00:00')
        if (dayjs().isBefore(endDate)) {
          endDate = dayjs().format('YYYY-MM-DD 00:00:00')
          // 判断是否需要加时间
          if (!this.dateOption.disabledDate(new Date(endDate))) {
            endDate = dayjs(endDate)
              .add(1, 'day')
              .format('YYYY-MM-DD 00:00:00')
          }
        }

        // dateArr = [
        //   dayjs(value).format('YYYY-01-01 00:00:00'),
        //   dayjs(value)
        //     .add(1, 'year')
        //     .format('YYYY-01-01 00:00:00')
        // ]
      } else if (this.currentDateType === 'date') {
        startDate = dayjs(value).format('YYYY-MM-DD 00:00:00')
        endDate = dayjs(value)
          .add(1, 'day')
          .format('YYYY-MM-DD 00:00:00')
        // dateArr = [
        //   dayjs(value).format('YYYY-MM-DD 00:00:00'),
        //   dayjs(value)
        //     .add(1, 'day')
        //     .format('YYYY-MM-DD 00:00:00')
        // ]
      }
      // if (this.dateOption.disabledDate(new Date(endDate))) {
      //   console.log('测试时间', this.dateOption.disabledDate(new Date(endDate)))
      // } else {
      //   console.log('1测试时间', this.dateOption.disabledDate(new Date(endDate)))
      // }

      this.$emit('input', [startDate, endDate])

      if (change) {
        setTimeout(() => {
          // console.log(dateArr)
          this.$emit(change, [startDate, endDate])
        }, 50)
      }
    },
    change () {
      this.setVlaue('on-change')
      // console.log(this.currentDateType)
      // this.setVlaue(this.initValue[this.currentDateType], 'on-change')
    },
    // button改变
    radioChange () {
      this.setVlaue('on-change')
      // console.log(value)
      // this.setVlaue(this.initValue[value], 'on-change')
    },
    reset (value) {
      this.$set(this.initValue, 'daterange', [value[0], value[1]])
      this.$set(this.initValue, 'date', value[0])
      this.$set(this.initValue, 'month', value[0])
      this.$set(this.initValue, 'year', value[0])
      // this.initValue = {
      //   daterange: [this.value[0], this.value[1]],
      //   date: this.value[0],
      //   month: this.value[0],
      //   year: this.value[0]
      // }
    }
  },
  created () {
    this.currentDateType = this.selectDateType
  }
}
</script>
<style lang="less" scoped>
</style>
